<template>
  <div>
    <el-row>
      <el-col :span="18">
        <!--查询按钮区域-->
        <el-form :inline="true" ref="queryForm" :model="queryMap" class="demo-form-inline">
          <el-form-item label="员工姓名" prop="ename">
            <el-input v-model="queryMap.ename" placeholder="员工姓名" :style="style"></el-input>
          </el-form-item>
          <el-form-item label="部门名称" prop="deptno">
            <el-select v-model="queryMap.deptno" placeholder="部门名称" clearable filterable>
              <el-option v-for="dept in deptList" :label="dept.dname" :style="style" :value="dept.deptno" :key="dept.deptno"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">查询</el-button>
            <el-button type="reset" @click="resetForm">重置</el-button>
            <el-button type="primary" @click="fold">
              <div v-if="!isFold">
                展开
                <i class="el-icon-arrow-down"></i>
              </div>
              <div v-else>
                收起
                <i class="el-icon-arrow-up"></i>
              </div>
            </el-button>
          </el-form-item>
          <div v-if="isFold">
            <el-form-item label="性别" prop="sex" style="margin-left: 27px">
              <el-select v-model="queryMap.sex" placeholder="性别" clearable filterable :style="style">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职位" prop="job">
              <el-select v-model="queryMap.job" placeholder="职位" style="margin-left: 29px" clearable filterable>
                <el-option v-for="job in jobList" :label="job.title" :style="style" :value="job.value" :key="job.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </el-col>
      <el-col :span="4">
        &nbsp;
      </el-col>
      <el-col :span="2">
        <!--增删改按钮-->
        <el-button-group>
          <el-button type="primary" icon="el-icon-edit" @click="openEditDialog(key)">编辑</el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <!--员工信息表格-->
    <el-table
      :data="dataList"
      border
      stripe
      :height="height"
      style="width: 100%"
      @selection-change="selectChange"
      :row-class-name="tableRowClassName"
    >
      <!--序号列-->
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="55"
        :index="indexMethod">
      </el-table-column>
      <!--全选框-->
      <el-table-column
        type="selection"
        align="center"
        width="55">
      </el-table-column>
      <el-table-column
        prop="empno"
        align="center"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="ename"
        align="center"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="sex"
        align="center"
        label="性别">
      </el-table-column>
      <el-table-column
        prop="job"
        align="center"
        label="职位">
      </el-table-column>
      <el-table-column
        prop="dname"
        align="center"
        label="所属部门">
      </el-table-column>
      <el-table-column
        prop="tel"
        align="center"
        label="联系电话">
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <el-pagination
      background
      class="pagination"
      layout="prev, pager, next, sizes, total"
      :total="total"
      :page-size="queryMap.limit"
      :current-page="queryMap.page"
      :page-sizes="limits"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>

    <emp-model ref="model" :deptList="deptList"></emp-model>
  </div>
</template>

<script>
    import EmpModel from '@/components/EmpModel'
    import tableMixin from '@/mixins/tableMixin'

    export default {
        name: "EmpList",
        components: {
            EmpModel
        },
        mixins: [tableMixin],
        data() {
            return {
                //部门列表
                deptList: [],
                //职位列表
                jobList: [],
                //后台接口路径
                url: {
                    getDataList: 'getEmpByPage',
                    getOne: 'getEmpByEmpno',
                    delBatch: 'delEmp'
                },
                //主键
                key: 'empno',
                //查询按钮折叠状态
                isFold: false,
                newHeight: '475px',
                style: {
                    width: "220px"
                }
            }
        },
        methods: {
            /**
             * 获取全部部门信息
             */
            getDeptList() {
                this.$http.get("getAllDept").then(res => {
                    this.deptList = res.data
                })
            },
            fold() {
                this.isFold = !this.isFold
                let temp = this.height
                this.height = this.newHeight
                this.newHeight = temp
            }
        },
        created() {
            //获取全部部门信息
            this.getDeptList()
            //获取职位信息
            this.jobList = Object.values(this.$store.state.dict["job"]).map((item, index) => ({value: index + 1, title: item.text}))
        }
    }
</script>

<style>

</style>